<template>
	<view class="classify">
		<view class="left">
			<view v-for="(item,index) in classList" :key="index" 
			:class="highlight==index?'highlight':''"
			@click="handleClick(index,item)"> 
			{{item.name}}
			</view>
		</view>
		<view class="right">
			<view v-for="(item,index) in rightData" @click="handleDetails(item)" :key="index">
				<image :src="decodeURIComponent(item.bookCover[1]).substring(7)"
				 ></image>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				female: [],
				male: [],
				picture: [],
				press: [],
				highlight:0,
				rightData:[],
				classList:[
					{name:'男频',key:'male'},
					{name:'女频',key:'female'},
					{name:'出版',key:'press'},
				]
			}
		},
		mounted() {
			this.getClassify()
		},
		methods: {
			handleDetails(item){
				let data={
					major:item.name,
					gender:this.classList[this.highlight].key
				}
				uni.navigateTo({
					url:"../../childClass/childClass?data="+JSON.stringify(data)
				})
			},
			handleClick(index,item){
				this.highlight=index
				this.rightData=this[item.key]
			},
			getClassify() {
				this.$request({
					url: '/cats/lv2/statistics',
					dataType:'json',
					sslVerify:false,
					method: 'GET',
				}).then(res => {
					console.log(res)
					let data = res[1].data
					this.female = data.female
					this.rightData=this.male = data.male
					this.picture = data.picture
					this.press = data.press
				})
			}
		}
	}
</script>

<style lang="scss">
	.classify {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
	}

	.classify .left {
		width: 160rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #f7f7f4;
	}
	.classify .highlight{
		background-color: #fff;
	}
	.classify>view{
		height: 100%;
		overflow: auto;
	}
	.classify .right {
		flex: 1;
		background-color: #fff;
		padding: 40rpx;
		box-sizing: box;
		
		&>view{
			float: left;
			width: 50%;
			display: flex;
			flex-direction: inherit;
			margin-top: 50rpx;
			&:nth-child(1),&:nth-child(2){
				margin-top: 0;
			}
			image{
				width: 80rpx;
				height: 100rpx;
			}
			
			view{
				flex: 1;
				margin-left: 20rpx;
				line-height: 100rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
